<template>
	<div class="box">
		<!-- <el-button -->
		<!-- type="primary" -->
		<!-- size="default" -->
		<!-- @click="num == 10 ? (num = 5) : (num = 10)"></el-button> -->
		<!--  -->
		<!-- <A> -->
		<!-- <div v-for="item in num">1</div> -->
		<!-- <template #header="scope"> -->
		<!-- {{ scope }} -->
		<!-- </template> -->
		<!-- </A> -->
		<!-- {{ obj1 }} -->
		<!-- 新form -->
		<FormItems v-model="obj1" :config="formList" ref="form1">
			<template #a>1</template>
			<template #b>2</template>
			<template #c>3</template>
		</FormItems>

		<FormItems
			v-model="obj1"
			:config="formList"
			state="readonly"></FormItems>
		<!-- <ATable v-model="arr" :config="tableCloumns"> -->
		<!-- <template #a="scope"> -->
		<!-- scope:{{ scope }} -->
		<!-- <br /> -->
		<!-- row:{{ scope.row }} -->
		<!-- <br /> -->
		<!-- index:{{ scope.$index }} -->
		<!-- </template> -->
		<!-- <template #b="scope"> -->
		<!-- scope:{{ scope }} -->
		<!-- <br /> -->
		<!-- row:{{ scope.row }} -->
		<!-- <br /> -->
		<!-- index:{{ scope.$index }} -->
		<!-- </template> -->
		<!-- </ATable> -->
		<!-- <el-form ref="form" :model="obj"> -->
		<!-- <ATable v-model="obj.arr" :config="tableCloumns2" model="arr"> -->
		<!-- <template #a="scope"> -->
		<!-- scope:{{ scope }} -->
		<!-- <br /> -->
		<!-- row:{{ scope.row }} -->
		<!-- <br /> -->
		<!-- index:{{ scope.$index }} -->
		<!-- </template> -->
		<!-- <template #b="scope"> -->
		<!-- scope:{{ scope }} -->
		<!-- <br /> -->
		<!-- row:{{ scope.row }} -->
		<!-- <br /> -->
		<!-- index:{{ scope.$index }} -->
		<!-- </template> -->
		<!-- </ATable> -->
		<!-- </el-form> -->
		<!-- <el-button type="primary" size="default" @click="valid"> -->
		<!-- valid -->
		<!-- </el-button> -->
		<!-- <el-button type="primary" size="default" @click="iframe"> -->
		<!-- openIframe -->
		<!-- </el-button> -->
		<!-- <el-button type="primary" size="default" @click="loading"> -->
		<!-- loading -->
		<!-- </el-button> -->
		<!-- <el-button type="primary" size="default" @click="closeloading"> -->
		<!-- closeloading -->
		<!-- </el-button> -->
		<!-- <el-button type="primary" size="default" @click="test_valid"> -->
		<!-- valid -->
		<!-- </el-button> -->
		<!-- <el-button type="primary" size="default" @click="clearValid"> -->
		<!-- clearValid -->
		<!-- </el-button> -->
	</div>
</template>

<script>
	import preview from '@/components/A/previewDialog/preview.js';
	import { openLoading, closeLoading } from '@/components/A/loading/index.js';
	import { useComputed } from '@/utils/hooks';
	import { reactive, watch, ref } from '@vue/composition-api';
	import A from './a.vue';
	import B from './b.vue';
	import S from './selectTree.vue';
	// import TableCloumn from "@/components/A/A-form/tableColumn/index.vue";
	import FormItems from '@/components/A/A-form/form/index.vue';
	import Price from './price.vue';
	import ATable from '../A/A-form/table/index.vue';
	export default {
		components: { A, B, S, FormItems, Price, ATable },
		watch: {
			price: {
				deep: true,
				handler(val) {
					// console.log(val);
				},
			},
		},
		dicts: ['finance_payment_type'],
		provide() {
			return {
				_arr: 1,
			};
		},
		directives: {
			test: {
				bind: (el, bind, vnode, oldVnode) => {
					console.log('bind');
					console.log(el, bind, vnode, oldVnode);
				},
				inserted: (el, bind, vnode, oldVnode) => {
					console.log('inserted');
					console.log(el, bind, vnode, oldVnode);
				},
				update: (el, bind, vnode, oldVnode) => {
					console.log('update');
					console.log(el, bind, vnode, oldVnode);
				},
				componentUpdated: (el, bind, vnode, oldVnode) => {
					console.log('componentUpdated');
					console.log(el, bind, vnode, oldVnode);
				},
				unbind: (el, bind, vnode, oldVnode) => {
					console.log('unbind');
					console.log(el, bind, vnode, oldVnode);
				},
			},
		},
		computed: {
			formList() {
				return [
					{
						label: 'A',
						type: 'input_number',
						prop: 'a',
						prototype: {
							step: 1,
							stepStrictly: true,
						},
						rules: true,
					},
					{
						label: 'B',
						type: 'input_number',
						prop: 'b',
						state: ({ row, index }) => {
							if (this.arr[index].a > 6) {
								return 'disabled';
							}
						},
						rules: true,
					},
					{
						label: 'c',
						type: 'input_number',
						prop: 'c',
						value: ({ row }) => {
							return row.a + row.b;
						},
						rules: true,
					},

					{
						label: 'upload',
						type: 'upload',
						prop: 'upload',
						rules: true,
					},
					{
						label: '姓名',
						prop: 'name',
						type: 'input',
						placeholder: '请输入姓名',
						rules: true,
						on: {
							// change: {
							//     handler: (row, index) => {
							//         console.log(row);
							//     },
							//     keepRaw: true,
							// },
							change: () => {
								console.log('change');
							},
						},
					},
					{
						label: 'dict',
						type: 'dict',
						prop: 'a',
						dictList: this.dict.type.finance_payment_type,
					},
					{
						label: 'select',
						type: 'select',
						prop: 'a',
						dictList: this.dict.type.finance_payment_type,
						state: 'disabled',
						on: {
							click: {
								handler: (row, index) => {
									console.log(row);
								},
								state: 'readonly',
							},
						},
					},

					{
						label: 'checkboxGroup',
						type: 'checkboxGroup',
						prop: 'c',
						dictList: this.dict.type.finance_payment_type,
					},
					{
						label: 'radioGroup',
						type: 'radioGroup',
						prop: 'd',
						dictList: this.dict.type?.finance_payment_type ?? [],
					},
					{
						label: 'input_number',
						type: 'input_number',
						prop: 'e',
					},
					{
						label: 'price',
						type: 'price',
						prop: 'e1',
						// max: 99,
						// min: 10,
						on: {
							change: row => {
								// console.log(row);
								// console.log('change');
							},
							blur: () => {
								// console.log('blur');
							},
						},
					},
					{
						label: 'textarea',
						type: 'textarea',
						prop: 'f',
					},
					{
						label: 'select_dialog',
						type: 'select_dialog',
						prop: 'e',
						propLabel: 'e_laebl',
						selectDialogOptions: {
							type: 'user',
							params: {},
						},
					},
					{
						label: 'slot',
						slot: 'a',
						type: 'empty',
					},
					{
						label: 'slot',
						slot: 'a,b,c',
					},
				];
			},

			tableCloumns() {
				return [
					{
						label: 'A',
						type: 'input_number',
						prop: 'a',
					},
					{
						label: 'B',
						type: ({ row }) => {
							if (row.a > 5) {
								return 'input_number';
							}
						},
						prop: 'b',
						state: ({ row, index }) => {
							if (row.a > 6) {
								return 'disabled';
							}
						},
					},
					{
						label: 'c',
						type: 'input_number',
						prop: 'c',
						value: ({ row }) => {
							return row.a + row.b;
						},
					},
					{
						label: '1',
						columnSlot: 'a',
					},
					{
						label: '2',
						prop: 'name',
						type: 'input',
					},
					{
						label: '3',
						slot: 'b',
						type: 'empty',
					},
				];
			},

			tableCloumns2() {
				return [
					// {
					// 	label: '1',
					// 	columnSlot: 'a',
					// },
					{
						label: '2',
						prop: 'name',
						type: 'input',
						rules: true,
					},
					// {
					// 	label: '3',
					// 	slot: 'b',
					// 	type: 'empty',
					// 	rules: true,
					// },
				];
			},
		},
		created() {},
		mounted() {
			this.refRedirect.call(this, 'form');
		},
		data() {
			return {
				num: 10,
				openIframe: false,
				iframeUrl: '',
				obj: {
					arr: [
						{ name: 1, a: 1, b: 1, c: 1 },
						{ name: 1, a: 1, b: 1, c: 1 },
					],
				},
				id: '1',
				obj1: {
					name: 1,

					s1: '1',
					s2: '单笔收款',
				},
				arr: [
					{ name: 1, a: 1, b: 1, c: 1 },
					{ name: 1, a: 1, b: 1, c: 1 },
				],
				form: { name: '' },
				rule: [],
				radio: 1,
				a: 1,
				b: 2,
				price: '',
			};
		},
		methods: {
			async test_valid() {
				let pass = await this._validate();
				console.log(pass);
			},
			clearValid() {
				this._clearValid();
			},
			loading() {
				openLoading.call(this);
				// setTimeout(() => {
				// 	closeLoading();
				// }, 5000);
			},
			closeloading() {
				closeLoading();
			},

			iframe() {
				let img = [
					'111111111111111',
					'https://jd-test.shopec.com.cn/jms/2024/05/13/1018e1cdf4e948ab9273fd4695a2fc0e.docx',
					'https://jd-test.shopec.com.cn/jms/2024/05/13/6dd0cd0acf614cd0a767dcba496ce011.xlsx',
					'https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg',
					'https://jd-test.shopec.com.cn/jms/2024/05/13/15ae44a0ad5b4502a7960af1f0772d36.pdf',
				];

				preview({
					url: img,
				});
			},
			select() {
				selectTemplate({
					type: 'QuotaCarType',
					params: {
						quotationProductSchemeId: '1767501175738101762',
					},
				}).then(({ res }) => {
					console.log(res);
				});
			},
			preview(url) {
				let p = new preview({
					url: [url],
				});
			},
			// change() {
			//     this.a = "a";
			//     this.b = "b";
			// },
			computePrice(a, b) {
				return `${a}_${b}`;
			},
			onSubmit() {
				this.rule = [
					{
						required: true,
						trigger: 'blur',
						message: '------',
					},
				];
			},
			deleteA(index) {
				this.arr.splice(index, 1);
			},
			click(row) {
				console.log(row);
			},
			setobj(val) {
				this.obj = val;
				this.$forceUpdate();
			},
			getobj() {
				console.log(this.obj);
			},
			openTemplate() {
				this.$SelectDialog({
					type: 'Order,Car',
					selection: true,
				}).then(res => {});
			},
			openUploadDialog() {
				this.$UploadDialog({
					showtoastSureBtn: false,
					uploadConfig: {
						uploadFileUrl: '#/a',
						limit: 1,
						params: {
							name: 1,
						},
					},
				}).then(res => {});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		height: 200vh;
	}
</style>
